<script setup>
import { Chart } from '@antv/g2';
import { onMounted } from 'vue';

onMounted(() => {

  const data = [
    { time: '9:00-10:00', value: 30, max: 100 },
    { time: '10:00-11:00', value: 90, max: 100 },
    { time: '11:00-12:00', value: 50, max: 100 },
    { time: '12:00-13:00', value: 30, max: 100 },
    { time: '13:00-14:00', value: 70, max: 100 },
  ];

  const chart = new Chart({
    container: 'c1',
    autoFit: true,
    height: 500,
  });

  chart
  .data(data)
  .scale('value', {
    alias: '销售额(万)',
    nice: true,
  })
  .axis('time', {
    tickLine: {
      length: 10,
    },
    title: {
      text: 'x',
      style: {
        fontWeight: 900,
      }
    },
    label: {
      style: {
        fill: 'red',
        shadowBlur: 5,
        shadowColor: 'black',
        fontSize: 40,
      }
    }
  })
  .axis('value', {
    line: {},
    grid: null,
  })
  .tooltip({
    showMarkers: false
  })
  .interaction('active-region')
  .interval()
  .color('#ccc')
  .position('time*max');
  chart
  .interval()
  .color('#f00')
  .position('time*value');

  chart.render();
});
</script>

<template>
  <div id="c1"></div>
</template>